<template>
  <div v-if="!deleted">
    <el-card class="card">
      <el-row >
        <div style="float:left;;width: 100px;height: 100px">
          <img style="width: 90px;height: 90px;object-fit: cover" src="../assets/python.jpg" />
        </div>
        <div class="content">
          <div>
            <div class="title" style="display: inline-block" @click="gotoProject(item.id)">
              {{item.name}}&nbsp;
            </div>
            <i v-if="!item.ispublic" class="el-icon-lock" style="display: inline-block;color: #aaaaaa"></i>
          </div>

          <div class="intro">
            {{item.introduction}}
          </div>
          <div style="color: #aaaaaa;margin-top: 5px;">
            <div style="display: inline-block">
              <el-tooltip class="item" effect="dark" content="收藏数" placement="bottom">
                <i v-if="item.isstar" class="el-icon-star-on" style="cursor: pointer" @click="unstar(item)"></i>
                <i v-if="!item.isstar" class="el-icon-star-off" style="cursor: pointer" @click="star(item)"></i>
              </el-tooltip>
              {{item.stars}}
            </div>
            <div style="display: inline-block;margin-left: 15px;">
              <el-tooltip class="item" effect="dark" content="克隆" placement="bottom">
<!--                <i class="el-icon-share" style="cursor: pointer"></i>-->
                <i class="ri-git-branch-line" style="cursor: pointer;font-size: 16px" @click="clone(item)"></i>
              </el-tooltip>
              {{item.folks}}

            </div>

            <div style="display: inline-block;margin-left: 15px;">
              <el-tooltip class="item" effect="dark" content="浏览量" placement="bottom">
                <i class="el-icon-view"></i>
              </el-tooltip>
              {{item.views}}
            </div>

            <div class="underline" v-if="isMy" style="display: inline-block;margin-left: 15px;cursor:pointer;" @click="edit(item)" >
              <i class="el-icon-edit"></i>
              编辑
            </div>

            <div class="underline" v-if="isMy" style="display: inline-block;margin-left: 15px;cursor:pointer;" @click="del(item)" >
              <i v-if="!item.isdeleting" class="el-icon-delete"></i>
              <i v-if="item.isdeleting" class="el-icon-loading"></i>
              删除
            </div>
            &nbsp;&nbsp; 创建于：{{getTime(item.createtime)}} &nbsp;&nbsp;
            最后编辑于：{{getTime(item.edittime)}}
            <div style="display: inline-block;float:right;margin-right: 10px;">
              <i class="el-icon-user"></i>
              {{item.user}}
            </div>
          </div>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import 'remixicon/fonts/remixicon.css'
export default {
  name: "ProjectBrief",
  props:{
    item:{},
    isMy:false,
    isExample:false,
  },
  data(){
    return{
      deleted:false
    }
  },
  methods:{
    star(pro){
      this.$axios.post('project/star/'+pro.id+"/",{
        token : localStorage.getItem("token")
      }).then(res=>{
        if(res.status === 200){
          this.$notify({
            type: 'success',
            title:"成功",
            message: '收藏成功!'
          });
          pro.stars ++;
          pro.isstar = true
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        }
      })
    },
    unstar(pro){
      this.$axios.delete('project/star/'+pro.id+'/',{
        data:{
          'token':localStorage.getItem("token")
        }
      }).then((res)=>{
        if(res.status === 200){
          this.$notify({
            type: 'success',
            title:"成功",
            message: '取消成功!'
          });
          pro.stars --;
          pro.isstar = false
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        }
      })
    },
    clone(pro){
      this.$confirm('此操作将复制该项目至您的项目列表中, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('project/clone/',{
          token:localStorage.getItem("token"),
          id:pro.id
        }).then(res=>{
          if(res.status === 200){
            this.$notify({
              type: 'success',
              title:"成功",
              message: '克隆成功!'
            });
            pro.folks++
          }else{
            this.$notify.error({
              title: '错误',
              message: res.data,
            });
          }
        })
      })
    },
    edit(pro){
      this.$router.push("edit?id="+pro.id);
    },
    del(pro){
      console.log(pro.isdeleting)
      this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pro.isdeleting = true
        this.$forceUpdate();
        this.$axios.post('project/delete/',{
          token:localStorage.getItem("token"),
          id:pro.id
        }).then(res=>{
          pro.isdeleting = false;
          if(res.status === 200){
            this.$notify({
              type: 'success',
              title:"成功",
              message: '删除成功!'
            });
            this.deleted = true
          }else{
            this.$notify.error({
              title: '错误',
              message: res.data,
            });
          }
        })
      })
    },
    gotoProject(id){
      if(this.isExample){
        this.$router.push('/project_e?id='+id);
      }else{
        this.$router.push('/project?id='+id);
      }

      return;
      console.log(localStorage.getItem("token"))
      this.$axios("project/goto/",{
        params:{
          id,
          token:localStorage.getItem("token")
        },

      }).then(res=>{
        if(res.status === 200){
          this.url = this.BACK_HOSTNAME+":"+res.data
          window.open(this.url)
          clearInterval(timer)
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        }
      }).catch(e=>{
      })
    },
    getTime(time){
      let now = new Date();
      console.log(time.slice(8,10),now.getDate())
      if(now.getFullYear() != time.slice(0,4) ||
        now.getMonth()+1 != time.slice(5,7) ||
        now.getDate() != time.slice(8,10)){
        return time.slice(0,10)
      }
      if(now.getHours() != time.slice(11,13) ||
        now.getMinutes() != time.slice(14,16)){
        return time.slice(11,16)
      }
      return "刚刚"
    }
  }
}
</script>

<style scoped>
.card{
  margin: 20px auto 20px auto;
  max-width: 1000px;
}
.card:hover{
  box-shadow:5px 5px 10px 5px rgba(0,0,0,0.15);
}
.content{
  height: 100px;
}
.title{
  font-weight: bold;
  cursor: pointer;
}
.title:hover{
  text-decoration:underline;
}
.underline:hover{
  text-decoration:underline;
}
.intro{
  margin-top: 10px;
  height: 44px;
  color: rgb(149, 151, 153);
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
</style>